<html>
<head>	
	<LINK href="./css/common.css" rel="stylesheet" type="text/css">
	<LINK href="./css/tutorial.css" rel="stylesheet" type="text/css">
	
	<!-- INCLUDE MOSHU'S LIBRARY-->
	<script type="text/javascript" src="Scripts/CanvasLib/dom-utils.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/canvas-extentions.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/shape.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/line.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/responsive-line.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/rect.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/responsive-rect.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/image.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/circle.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/arrow.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/text.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/irregular-shape.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/responsive-irregular-shape.js"></script>
	
	<script type="text/javascript" src="Scripts/CanvasLib/scene.js"></script>
	
	<script type="text/javascript" src="Scripts/CanvasLib/animation.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/draggable.js"></script>
	<!-- END MOSHU'S -->
	
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
	<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
	
	<div class="page">
		<div class="page-header ">
			<div class="title">
				<span>Moshu's Canvas Library</span>
			</div>		
			<div class="menu"></div>			
		</div>
		<div class="page-content" style="overflow-y:scroll;">
			<div style="width:80%;margin-left:10%;margin-top:2%;margin-bottom:2%;">
				<h2>Moshu's lib is a simple (but very complex ;)) canvas vectorialization library</h2>
				<p>
				<h3>Good things:</h3>
				<ul>
				<li>made by moshu</li>
				<li>very easy to extend by anyone</li>
				<li>should be fast :) - i mean high performance</li>
				<li>ultra light - it doesn't use any third party tool (like jQuery for example)</li>
				</ul>
				</p>
				<p>
				<h3>Bad things:</h3>
				<ul>
				<li>made by moshu</li>
				<li>very easy to extend by anyone - if that anyone is moshu</li>
				<li>should be fast :) - i mean it is kind of slow</li>
				<li>ultra light - it doesn't use any third party tool (like jQuery for example) - that is why it doesn't work</li>
				<li>still work in progress - like 100 things that need to be added, and 1000 bugs to be solved</li>
				</ul>
				</p>
				<h3>How is it shaped?</h3>
				By the way, you can see here the Rectangle, the arrowed line and the text shapes in action :).<br><br>
				<div style="width:100%;text-align:center;">
					<canvas id="c" width="700" height="500">
					</canvas>
				</div>
			</div>
		</div>
	</div>
	<div class="page-footer">
	</div>

	<script type="text/javascript">
		$( ".menu" ).load( "partials/menu.html" );
		$( ".page-footer" ).load( "partials/footer.html" );
		$(".resizable").resizable();
	</script>
	
	<script type="text/javascript">
		var scene = new Scene("c");
		var shapeClass = new ResponsiveRectangle(0,0,45,20);
		shapeClass.fillColor = "#FFCC66";
		//shapeClass.fill = true;
		shapeClass.zIndex = 1;
		scene.add(shapeClass);
		
		var shapeClassText = new CanvasText(98,54);
		scene.add(shapeClassText);
		shapeClassText.fillColor = "#000";
		shapeClassText.strokeColor = "red";
		shapeClassText.fontSize = 25;
		shapeClassText.zIndex = 2;
		shapeClassText.setText("Shape Class");
		
		
		var modifiers = new ResponsiveRectangle(55,0,45,80);
		modifiers.fillColor = "#CCFFFF";
		modifiers.strokeColor = "#CCFFFF";
		scene.add(modifiers);
		
		var txt = new CanvasText(490,54);
		txt.fontSize = 25;
		scene.add(txt);
		txt.setText("Modifiers");
		
		txt = new CanvasText(430,84);
		txt.fontSize = 16;
		scene.add(txt);
		txt.setText("- Animation - algorithms");
		
		txt = new CanvasText(430,104);
		txt.fontSize = 16;
		scene.add(txt);
		txt.setText("- Drag behavior");
		
		var shapeclasses = new ResponsiveRectangle(0,35,45,45);
		shapeclasses.fillColor = "#FFCC66";
		//shapeClass.fill = true;
		shapeclasses.zIndex = 1;
		scene.add(shapeclasses);
		
		txt = new CanvasText(10,210);
		txt.fontSize = 22;
		scene.add(txt);
		txt.setText("Classes inheriting from Shape");
		
		txt = new CanvasText(10,250);
		txt.fontSize = 16
		scene.add(txt);
		txt.setText("Simple shapes: ");
		
		txt = new CanvasText(10,270);
		txt.fontSize = 16
		scene.add(txt);
		txt.setText("Line, ArrowedLine, Rectangle, Circle");
		
		txt = new CanvasText(10,300);
		txt.fontSize = 16
		scene.add(txt);
		txt.setText("Other shapes: ");
		
		txt = new CanvasText(10,320);
		txt.fontSize = 16
		scene.add(txt);
		txt.setText("IrregularShape, Image, Text");
		
		txt = new CanvasText(10,350);
		txt.fontSize = 16
		scene.add(txt);
		txt.setText("Percentage positioned shapes ");
		
		txt = new CanvasText(10,370);
		txt.fontSize = 16
		scene.add(txt);
		txt.setText("Line, Rectangle, IrregularShape");
		
		var line =  new ArrowedLine(150, 100, 0,75);
		scene.add(line);
		// force scene redraw
		debugger;
		scene.invalidate();
	</script>
</body>
</html>